<template>
	<div class="elcontainer">
		<nullPage v-if="emptyPage"></nullPage>
		<bootPage v-else-if="bootPageShow"></bootPage>
		<loadPage v-else-if="loadPageShow"></loadPage>
		<div class="elcontainer" v-if="directPageShow">
			<div class="elheader" v-if="info.noticeSwitch==1">
				<!-- <img :src="info.logo==null?defaultLogo:info.logo"> -->
				<Notice></Notice>
			</div>
			<div style="height: 220px;">
				<Videos ref="video"></Videos>
			</div>
			<div style="height: 50px;position: relative;" v-show="timeRunShow">
				<Appoint @handlePick="appDiog"></Appoint>
				<!-- <ViewNum ref="viewNum" @adClick="adClick"></ViewNum> -->
				<!-- <img src="static/img/close.png" id="adimg" alt="" @click="adClick" v-if="$store.state.liveInfo.advSwitch==1 && adShow"> -->
			</div>
			<div style="height: 50px;position: relative;" v-if="$store.state.liveInfo.advSwitch==1 && adShow">
				<Ad ref="ads"></Ad>
				<div id="adimg" @click="adClick" v-if="$store.state.liveInfo.advSwitch==1 && adShow">
					<Icon type="md-close" />
					<span>关闭广告</span>
				</div>
			</div>
			<div :style="{height:tabHeight}">
				<Menus v-if="menuShow" @playPc="playPcVideo" @changeLivePc="toLiving" ref="menus"></Menus>
			</div>
			<ViewingRestriction></ViewingRestriction>
			<moveMenus ref="movemenu"></moveMenus>
			<!-- <move @getQuestionInfo="getQuestionInfo" v-if="checkMoveStatus"></move> -->
			<moveBill v-if="checkMoveStatus"></moveBill>
		</div>
		<!-- 预约窗口 -->
		<AppointDialog v-if="dilog" @appointStatus="dilogDn"></AppointDialog> 
		<MaskDilog v-if="dilog"></MaskDilog> 
	</div>
</template>

<script>
	export default {
		data() {
			return {
				adShow: false,
				tabHeight: "",
				menuShow:false,
				moveStatus:false
			};
		},
		components: {
			Videos: () => import(`@/components/page/video`), //视频播放器
			Menus: () => import(`@/components/page/menu`),  //菜单
			ViewNum: () => import(`@/components/comm/viewNum`),  //观看人数
			ViewingRestriction: () => import("@/components/page/viewingRestriction"),  //鉴权密码
			Ad: () => import("@/components/comm/ad"),  //广告
			Notice: () => import("@/components/comm/notice"),  //公告
			move: () => import("@/components/menuSetting/move"),   //活动菜单
			moveMenus: () => import("@/components/menuSetting/moveMenus"),//活动菜单
			moveBill: () => import("@/components/menuSetting/moveBill"),//活动菜单按钮
			nullPage: () => import("@/components/page/404"),
			bootPage: () => import("@/components/comm/bootPage"),  //引导页
			loadPage: () => import("@/components/page/loading"), //加载中遮罩层
			Appoint: () => import("@/components/comm/appoint"), //预约通知
			AppointDialog: () => import("@/components/comm/appointDialog"), //预约确认
			MaskDilog: () => import("@/components/comm/mask"), //预约框伴随的遮罩层
		},
		computed: {
			timeRunShow(){
				return this.$store.state.timeRunShow//倒计时开关
			},
			defaultLogo() {
				return this.$store.state.defaultLogo; //默认logo
			},
			emptyPage(){
				return this.$store.state.emptyPage; 
			},
			bootPageShow() {
				return this.$store.state.bootPageShow; //引导图显隐
			},
			info() {
				return this.$store.state.liveInfo;
			},
			directPageShow(){
				return this.$store.state.directPageShow; //直播间显隐
			},
			loadPageShow(){
				return this.$store.state.loadPageShow; //loading遮罩层显隐
			},
			dilog(){
				return this.$store.state.dilogStatus; //预约确认框显隐
			},
			//只要有菜单配置项，h5页面右小角按钮就出现
			checkMoveStatus(){
				if(this.info.thumbSwitch == 1 || this.info.wxShareSwitch == 1){
                    this.moveStatus = true;
				}else{
					this.moveStatus = false;
				}
			    return this.moveStatus;
			},
		},
		created() {
			// console.log('switch',this.info.thumbSwitch);
			setTimeout(()=>{
				this.init();
			},200)
			setTimeout(() => {
				this.adShow = true
			}, 10000)
			setTimeout(()=>{
				let oInfoData = null;
				oInfoData = this.$store.state.liveInfo;
				let overifyStatus = this.$store.state.verifyStatus;		
				if(oInfoData.viewPermission == 0){
                    this.menuShow = true
				}else if(overifyStatus == true){
                    this.menuShow = false
				}else{
                    this.menuShow = true
				}
			},1000)
		},
		methods: {
			dilogDn(){
               this.$store.state.dilogStatus = false;
			},
			appDiog(){
               this.$store.state.dilogStatus = true;
			},
			adClick() {
				this.adShow = !this.adShow
				if (this.info.advSwitch != 1) {
					this.$toast("广告未添加");
				}
			},
			getQuestionInfo() {
				this.$refs.movemenu.getQuestionInfo()
			},
			// 点播
			playPcVideo(url) {
				this.$store.state.liveImgShow = true;
				this.$nextTick(() => {
					this.$refs.video.showPlayer(url, false, true, "");
				});
			},
			/*返回直播按钮*/
			toLiving(value) {
				this.$refs.video.testStatus(this.$store.state.live);
			},
			// 初始化h5接口
			init() {
				let id = this.$route.params.id;
				let info = this.$store.state.liveInfo
				if (info.noticeSwitch == 1) {
					this.tabHeight = "calc(100% - 302px)"
				} else {
					this.tabHeight = "calc(100% - 274px)"
				}
				if (info.guideSwitch == 1) {
					this.$store.state.bootPageShow = true; //引导图
				}else{
					this.$store.state.directPageShow = true;
				}
			},

		}
	};
</script>
<style lang="less" rel=stylesheet/less scoped="scoped">
	.elheader {
		height: 26px;
		text-align: left;
		img {
			height: 100%;
		}
	}

	#adimg {
		position: absolute;
		right: 5px;
		top: 5px;
		z-index: 10;
		color: #fff;
		display: flex;
		align-items: center;
		cursor: pointer;
	}
</style>
